<template>
  <div id="app">
    <el-container style="height: 920px; border: 1px solid #eee">
      <el-aside v-show="isLogin" width="300px">
        <el-row class="tac">
          <el-col>
            <!--            <el-row v-if="userid" class="user" type="flex" justify="center" align="middle">-->
            <!--              <el-col @click.native="toSetting()">-->
            <!--                <el-avatar class="head-pic"> {{ username }}</el-avatar>-->
            <!--              </el-col>-->
            <!--            </el-row>-->
            <!--            <el-row v-else class="login" type="flex" justify="center" align="middle">-->
            <!--              <el-button @click="toLogin">请登录</el-button>-->
            <!--            </el-row>-->
            <el-row class="head" type="flex" justify="left" align="middle">
              <div class="head-img">
                <el-image
                    style="width: 70px; height: 70px;border-radius: 50%;"
                    src="../../../static/img/head-img.jpg"
                    :fit="fit"></el-image>
              </div>
              <h1 style="color:#8B1A1A;">充电桩管理系统</h1>
            </el-row>
            <el-menu text-color="#410306">
              <el-menu-item v-for="(item, index) in app" :key="index" @click="routerJump(item)" :class="color">
                <i :class="item.icon" style="font-size: 25px;color:	#778899;"></i>
                <span slot="title" style="color:#8B1A1A;font-size:medium;font-weight:500;">{{ item.name }}</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <el-main class="main">
          <el-col>
            <el-breadcrumb v-show="isLogin" class="breadcrumb" separator="/">
              <el-breadcrumb-item>{{title}}</el-breadcrumb-item>
            </el-breadcrumb>
            <router-link></router-link>
            <router-view @logout="reusername" @login="getUserid"></router-view>
          </el-col>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'App',
  data() {
    return {
      isLogin: false,
      userid: this.$store.state.user.userid,
      usertype: this.$store.state.user.usertype,
      audit: this.$store.state.user.audit,
      router: '',
      title: '首页',
      color: false,
      app: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getUser()
    },
    getUser() {
      var self = this;
      if (this.$store.state.user.userid == '') {
        self.getApp('', 0);
      } else {
        this.userid = this.$store.state.user.userid
        axios.post('http://112.124.41.199:6112/csms/user/getUserById', {
          userid: this.userid
        }).then(function (res) {
          self.usertype = res.data.usertype;
          self.username = res.data.username;
          self.audit = res.data.audit;
          self.getApp(res.data.usertype, res.data.audit);
        }).catch(function (err) {
          self.$message.error(err);
        })
      }
    },
    getApp(usertype, audit) {
      if (audit === 0) {
        usertype = null
      }
      var self = this;
      axios.post('http://112.124.41.199:6112/csms/app/getAppByType', {
        type: usertype
      }).then(function (res) {
        self.app = res.data;
      }).catch(function (err) {
        self.$message.error(err);
      })
    },
    routerJump(val) {
      this.title = val.name
      this.$router.push('/' + val.router)
      this.color = !this.color;
    },
    toLogin() {
      this.$router.push('/login')
    },
    toSetting() {
      this.$router.push('/setting')
    },
    getUserid() {
      this.isLogin = true
      this.getUser()
    },
    reusername() {
      this.isLogin = false
      this.userid = ''
      this.username = ''
      this.getApp('', 0)
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #410306;
}

.user, .login {
  height: 100px;
}

.color span {
  background: lightblue;
}

.head-img{
  margin-right: 20px;
  margin-left:15px;
}

.main {
  height: auto;
  padding: 0;
}

.tac {
  height: 100%;
  background-image: url("../static/img/router.jpg");
  background-size:contain;
}

.el-menu {
  background-color: rgba(255, 255, 255, 75%);
  text-align: left;
}

.breadcrumb {
  padding: 20px 20px;
  background-color: #ead6bb;
  height:34px;
  line-height: 34px;
}
.el-breadcrumb__item {
  .el-breadcrumb__inner {
    font-weight:normal;
    &.is-link{
      color: #FFF;
    }
  }
  &:last-child{
    .el-breadcrumb__inner{
      color: #8B1A1A !important;
    }
  }
}
</style>
